const path = require('path');
const htmlWebpackPlugin = require("html-webpack-plugin");
// const { CleanWebpackPlugin } = require('clean-webpack-plugin');
// 正确方式
const CleanWebpackPlugin = require('clean-webpack-plugin').CleanWebpackPlugin;


module.exports = {
    mode: 'production',
    entry: './src/index.ts',
    output: {
        // 指定打包文件的目录
        path: path.resolve(__dirname, 'dist'),
        // 打包后文件的文件
        filename: "bundle.js",

        // 告诉webpack不使用箭头,防止输出代码的最外层不包含箭头函数
        environment:{
            arrowFunction: false
        }
    },
    module: {
        // 指定要使用的loader和 加载的规则
        rules: [
            {
                // test指定的是规则生效的文件
                test: /\.ts$/, // 所有ts结尾的文件
                use: [
                    { // 这种传入对象,就是有自己的配置.  下面的ts-loader是直接使用默认参数.
                      loader : 'babel-loader' ,
                        // 设置babel的参数
                        options:{
                            // 预定义的环境
                            presets:[
                                [
                                    // 指定环境插件
                                    "@babel/preset-env",
                                    // 配置信息
                                    {
                                        "targets": { // 目标兼容到88版本
                                            // "chrome" : "87"
                                            "ie": "10" // 会根据这个targets 去执行兼容版本. 只要写的是ie,就会改成var.
                                        },
                                        "corejs": "3", // 看是用的那个版本的js. 是去package.json 的大版本 "core-js": "^3.42.0",
                                        // 使用corejs的方式, 一般是usage. 就是按需加载. -- 用到哪些,就处理哪些功能
                                        "useBuiltIns": "usage", // 按需加载
                                    }
                                ]
                            ]
                        }
                    },
                    // 在下面先执行,先把ts转化为js新版本. 然后执行babel-loder.转化为旧语法.
                    'ts-loader',
                ], // 使用ts-loader处理 所有以ts结尾的文件的编译
                // 要排除的文件
                exclude: /node-modules/ // 所有这个文件夹里的,都过滤.
            }
        ]
    },
    plugins: [
        new htmlWebpackPlugin({
            // 模板和title是互斥,俩选一个就行.
            // title: "这是一个自定义的title- 顶替webpack-App",
            template: "./src/index.html"
        }),
        new CleanWebpackPlugin(),
        
    ],

    
    // 用来设置引用模块, 设定哪些引用模块,可以作为我们的模块.
    resolve: {
        extensions: ['.ts', '.js']
    }
}